<template>
  <div class="eat">
      <div class="eat-top">
        <van-search shape="round" background="#ffffff" placeholder="输入商品名称"/>
      </div>
      <div class="eat_title">
        <p class="mute">
          <span class="shu"></span>
          <span class="text">今日菜单</span> 
        </p>
      </div>
      <div class="eat_mdl">
        <div class="mdl_one">
         <van-tabs v-model="active"  @click="onClick($event)">
        <van-tab  v-for="(item) in tabChangeCont" :key="item.id" :title="item.name">
          <ul>
            <li v-for="(items) in foodCont" :key="items.id">
              <div class="foods_lis">
                <img :src="items.image" alt="" class="imgText"/>
                <div class="text_foods">
                  <p class="title_foods">{{ items.name }}</p>
                </div>
                <div class="tx">
                  <img :src="items.author_avatar" alt="" class="imgTx">
                  <p class="avatar">{{items.author_name}}</p>
                </div>
              </div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
        </div>
              <div class="mdl_two">
                全部 >
             <van-popup v-model="show" position="bottom" :style="{ height: '50%' }" />
           </div>
      </div>

  </div>
</template>

<script>
export default {
    name:"EatView",
    data() {
      return {
        show: false,
        active:0,
        activeNames: ['1'],
        //tab切换数据：
        tabChangeCont:[],
        path: "lk01",
        foodCont:[]
      };
    },
    async created(){
      let res = await this.$http.getHomeFoodApi();
      this.tabChangeCont=res.data.data.list;
      console.log(this.tabChangeCont);
      this.$http.getCateFoodApi(this.path).then((res) => {
        console.log(res.data.data.big_recommend.list)
         this.foodCont = res.data.data.big_recommend.list
      });
    },
    methods:{
      onClick(e) {
      console.log(e);
      //因为json数据中没有lk000所以为了对应上就要+1
      let arr = e + 1;
      console.log(arr);
      //三目运算符 拼接成json数据地址
      let lis = e + 1 >= 10 ? "lk" + arr : "lk0" + arr;
      console.log(lis);
      this.$http.getCateFoodApi(lis).then((foodres) => {
        this.foodCont = foodres.data.data.big_recommend.list;
        console.log(this.foodCont)
      });
        },
    },
}
</script>

<style lang="scss" scoped>
  .eat-top{
    height:.8rem;
    border-bottom: 0.08rem solid #888;
  }
  .eat_title{
    width:7.1rem;
    height:1.2rem;
    padding-left:.4rem;
    padding-top:.05rem;
    font-size:.45rem;
    color:#000;
    .mute{
      width:3rem;
      display: flex;
      .shu{
        width:0.08rem;
        height:.55rem;
        background:rgb(31, 160, 31);
        display: block;
      }
      .text{
         display: block;
         margin-top:-0.04rem;
         margin-left:.15rem;
      }
      }
  }
  .eat_mdl{
    width:7.5rem;
    height:.8rem;
    display: flex;
    font-size: .3rem;
    .mdl_one{
      width:5.9rem;
          ul{
            width:7.5rem;
            height:auto;
            padding-bottom:2rem;
            background: #fff;
            display: flex;
            flex-wrap: wrap;
      li{
        padding:.15rem;
        border: .04rem solid #3ef56c;
        border-radius: .2rem;
        margin:.2rem 0 0 .1rem;
        background: rgb(243, 243, 243);
        .title_foods{
          width:3rem;
          font-weight: bold;
          font-size: .3rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box; //使用自适应布局
          line-clamp: 2;
          -webkit-line-clamp: 1; //设置超出行数，要设置超出几行显示省略号就把这里改成几
          -webkit-box-orient: vertical;

        }
        .imgText{
            width:3.2rem;
            border-radius: .2rem;
            height:auto;
            display: block;
          }
          .tx{
            display: flex;
            width:3rem; 
            justify-content: space-between;
            .imgTx{
              width:.7rem;
              height:.7rem;
              display: block;
              border-radius: 50%;
              margin-top:.15rem;
            }
            .avatar{
              width:2.5rem;
              margin-left:.2rem;
              height:.3rem;
              color: #666;
              font-size: .25rem;
              margin-top:.3rem;
            }
          }
      }
    }
    }

  }
</style>